<template>
  <section style="text-align: left">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      top="1%"
      @close="clear">
      <el-form :model="orderForm" ref="OrderFormDate" :rules="orderFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号" label-width="120px" prop="orderId">
              <el-input v-model="orderForm.orderId" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成日期" label-width="120px" prop="createTime">
              <el-input v-model="orderForm.createTime" autocomplete="off" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户" label-width="120px" prop="customer.name">
              <el-input v-model="orderForm.customer.name" autocomplete="off" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" label-width="120px" prop="customer.phone">
              <el-input v-model="orderForm.customer.phone" autocomplete="off" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="车牌号" label-width="120px" prop="customer.carNum">
          <el-input v-model="orderForm.customer.carNum" autocomplete="off" :disabled="disabled"/>
        </el-form-item>
        <el-form-item label="问题描述" label-width="120px" prop="descrip">
          <el-input type="textarea" v-model="orderForm.descrip" autocomplete="off" :disabled="otherDisable"/>
        </el-form-item>
        <el-form-item label="地址" label-width="120px" prop="address">
          <el-input type="textarea" v-model="orderForm.address" autocomplete="off" :disabled="otherDisable"/>
        </el-form-item>
        <el-form-item label="需要服务" label-width="120px">
          <el-checkbox-group v-model="checkcategory">
            <el-checkbox v-for="(cate,id) in categorys" :label="cate.id" :key="id" :disabled="categorysDisabled">
              {{ cate.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否需要还车" label-width="120px">
          <el-checkbox-group :max="max" v-model="checkTurn" @change="handleChange">
            <el-checkbox v-for="isReturn in turnCars" :label="isReturn" :key="isReturn" :disabled="returnDisable">
              {{ isReturn }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin: -40px 0">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {validateCarNum, validateName, validatePhone} from "../../../../utils/validate";

export default {
  name: "OrderEditWithAdd",
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      /*表单*/
      orderForm: {
        orderId: '',
        createTime: '',
        descrip: '',
        isReturn: '',
        createBy: '',
        status: '',
        updateBy: '',
        updateTime: '',
        address: '',
        customer: {
          name: '',
          phone: '',
          carNum: ''
        },
        category: ''
      },
      /*验证规则*/
      orderFormRules: {
        'customer.name': {required: true, validator: validateName, trigger: 'blur'},
        'customer.phone': {required: true, validator: validatePhone, trigger: 'blur'},
        'customer.carNum': {required: true, validator: validateCarNum, trigger: 'blur'}
      },
      /*是否需要还车*/
      checkTurn: [],
      turnCars: ["是", "否"],
      max: 1,
      /*选中的服务类型*/
      checkcategory: [],
      categorys: [],
      order: '',
      disabled: false,
      categorysDisabled: false,
      returnDisable: false,
      otherDisable: false,
    }
  },
  mounted() {
    this.categoryList()
  },
  methods: {
    add() {
      this.dialogFormVisible = true
      this.title = '添加订单'
      this.datadeal() // 打开表单填充orderId与date
    },
    edit(order) {
      // debugger
      this.dialogFormVisible = true
      this.title = '修改订单'
      this.order = order

      // 根据订单状态对表单动态禁用
      // 添加订单后不能修改
      this.disabled = true

      if (order.status > 2)
        this.categorysDisabled = true
      if (order.status >= 5) {
        this.otherDisable = true
        this.returnDisable = true
      }
      let temp
      if (order.isReturn === 1) {
        temp = "是"
      }
      if (order.isReturn === 0) {
        temp = "否"
      }
      // 是否需要还车
      for (let key = 0; key < this.turnCars.length; key++) {
        if (this.turnCars[key] === temp) {
          this.checkTurn.push(this.turnCars[key])
        }
      }
      // 回显所需服务
      var cateTemp = []
      for (let categoryKey in order.category) {
        cateTemp.push(order.category[categoryKey].id)
      }
      this.checkcategory = cateTemp

      this.orderForm = order

    },
    onsubmit() {
      this.$refs.OrderFormDate.validate((valid) => {
        if (valid) {
          var data = Object.assign({}, this.orderForm)

          // 选择服务类型数组
          var temp = []
          for (let key = 0; key < this.checkcategory.length; key++) {
            for (let j = 0; j < this.categorys.length; j++) {
              if (this.checkcategory[key] === this.categorys[j].id) {
                temp.push(this.categorys[j])
              }
            }
          }
          data.category = temp

          // 添加
          if (this.orderForm.createBy === "") {
            data.createBy = this.$store.state.user.username
            data.status = 1
            data.customer = this.orderForm.customer
          }
          // 修改
          if (this.orderForm.createBy !== "") {
            data.updateBy = this.$store.state.user.username
            data.updateTime = this.timeformate(new Date())
          }
          // debugger
          this.$axios.post("/orders/add_update", data).then(resp => {
            if (resp.data.code === 200) {
              this.$message({
                message: resp.data.result,
                type: "success"
              })
              // 调用父组建
              this.$emit("reload")
              // 清空表单
              this.clear()
              this.dialogFormVisible = false
            }
          })
        }
      })
    },
    categoryList() {
      this.$axios.get("/orders/categoryList").then(resp => {
        if (resp.status === 200) {
          this.categorys = resp.data.result
        }
      })
    },
    clear() {
      // 清空表单验证
      this.$refs.OrderFormDate.resetFields();
      this.$refs.OrderFormDate.clearValidate();
      this.orderForm = {
        orderId: '',
        createTime: '',
        descrip: '',
        isReturn: '',
        createBy: '',
        address: '',
        customer: {
          name: '',
          phone: '',
          carNum: ''
        }
      }
      this.checkTurn = []
      this.checkcategory = []
      this.returnDisable = false
      this.otherDisable = false
      this.categorysDisabled = false
    },

    /* 是否还车 */
    handleChange(value) {
      let temp
      for (let valueKey in value) {
        temp = value[valueKey]
      }
      if (temp === "是") {
        this.orderForm.isReturn = 1
      }
      if (temp === "否") {
        this.orderForm.isReturn = 0
      }
    },

    /* 工具方法 */
    datadeal() {
      this.orderForm.orderId = new Date().getTime()
      let createTime = new Date();
      let time = this.timeformate(createTime)
      this.orderForm.createTime = time
    },
    timeformate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return year + "-" + month + "-" + day + ' ' + hour + ":" + minute + ":" + second
    },
  }
}
</script>

<style scoped>

</style>
